<template>
	<view class="analyse" :style="{ paddingTop: paddingHeight + 'px' }">
		<nav-bar title="测量记录"></nav-bar>
		<view class="m-container">
			<view class="r-card">
				<view style="padding: 0 46rpx">
					<view class="date-box">
						<view class="pre-p" @click="reduceTap">
							<u-icon
								name="http://oss.antaimedical.com/images/pro/2025/02/67b53d20e4b0d615350f313dEKrtfsElllvJ87b7d6428720bc342605b9c886760068.png"
								size="23"
							></u-icon>
						</view>
						<view class="date-m" @click="showCalendar = true">
							<text>{{ currentSearchTime }}</text>
						</view>
						<view class="next-p" @click="plusTap">
							<u-icon
								name="http://oss.antaimedical.com/images/pro/2025/02/67b53d0fe4b0be9d44423447QSYIrP0e4a6H34c2497b89a3ddf79dbd7258097e400e.png"
								size="23"
							></u-icon>
						</view>
					</view>
					<view class="new-tabs">
						<view
							class="new-tab"
							@click="changeType(item.type)"
							:class="{ current: currentType == item.type }"
							v-for="(item, index) in tabs"
							:key="index"
							>{{ item.text }}</view
						>
					</view>
				</view>
				<view class="my-charts">
					<myCharts
						:option="todayMetabolismOption"
						@chartClick="chartClick"
					></myCharts>
				</view>
			</view>

			<view class="days_l">
				<view class="header">
					<view class="l">
						<u-icon
							name="http://oss.antaimedical.com/images/pro/2025/02/67b584c3e4b0be9d44423448dX0AePFztY1N7e601d183211970ba7f6a2773306002a.png"
							size="25"
						></u-icon>
						<text style="margin-left: 10rpx">代谢水平</text>
					</view>
					<view class="r" @click="goRecord">
						更多 <u-icon name="arrow-right" size="15"></u-icon>
					</view>
				</view>
				<view class="con">
					<view v-if="daysList.length">
						<view
							class="items"
							v-for="(item, index) in daysList"
							:key="index"
							@click="goRemark(item)"
						>
							<view class="info">
								<view class="i_t">
									<view class="time">
										<text>{{ item.measureTime }}</text>
									</view>
									<view class="type-box">
										<view class="tag">{{ item.type }}</view>
									</view>
								</view>
								<view class="level">
									<view>等级{{ item.rerLevel }}</view>
									<view class="level-text">代谢水平</view>
								</view>
								<view class="details-box">
									<text>查看详情</text>
									<text
										class="iconfont icon-arrow_rigth"
									></text>
								</view>
							</view>
						</view>
					</view>
					<u-empty
						text="暂无数据"
                        width="100"
                        height="100"
						icon="http://oss.antaimedical.com/images/pro/2025/03/67d931b8e4b0d615350f315d4e8O2MSrFJ2ae78d945bacfe324df54cef40f90b690c.png"
						v-else
					>
					</u-empty>
				</view>
			</view>
		</view>
		<view>
			<my-calendar
				:monthNum="24"
				:defaultDate="defaultDate"
				:maxDate="maxDate"
				@confirm="selectDate"
				:minDate="minDate"
				:show="showCalendar"
				color="#545DDE"
				closeOnClickOverlay
				@close="showCalendar = false"
			></my-calendar>
		</view>
	</view>
</template>

<script>
import * as echarts from '@/components/uni-ec-canvas/echarts.min.js'
import myCharts from '@/components/charts/myCharts.vue'
import myCalendar from '@/components/myCalendar/myCalendar.vue'
import { findMeasureRecord, findCh0RateRecord30 } from '@/api/index.js'
import { getItemColor, getWeekDate } from '@/utils/utils.js'
const dayjs = require('@/utils/dayjs.min.js')
export default {
	components: {
		myCharts,
		myCalendar
	},
	data() {
		return {
			paddingHeight: uni.getStorageSync('navbarHeight'),
			userId: uni.getStorageSync('userId'),
			currentType: 1,
			defaultDate: [],
			maxDate: undefined,
			minDate: undefined,
			currentSearchTime: undefined, // 当前查询的时间
			tabs: [
				{
					type: 1,
					text: '日'
				},
				{
					type: 2,
					text: '周'
				},
				{
					type: 3,
					text: '月'
				}
			],
			currentMeasureNumInfo: undefined,
			showCurrentEvent: false,
			showCalendar: false, // 日历控件显示
			daysList: [], // 某一天数据
			todayMetabolismOption: {},
			chartType: '--',
			levelColor: {
				1: '#54DE97',
				2: '#54A2DE',
				3: '#AE81F3',
				4: '#DEB354',
				5: '#EC8F59'
			}
		}
	},
	filters: {
		getTag(data) {
			if (data == 1) {
				return '清晨'
			} else if (data == 2) {
				return '运动前'
			} else if (data == 3) {
				return '运动后'
			} else if (data == 4) {
				return '餐前'
			} else if (data == 5) {
				return '餐后'
			} else if (data == 7) {
				return '睡前'
			}
		}
	},
	onShow() {
		this.fetchData()
	},
	onLoad() {
		this.maxDate = dayjs().format('YYYY-MM-DD')
		this.minDate = dayjs(dayjs(this.maxDate).subtract(365, 'day')).format(
			'YYYY-MM-DD'
		)
		this.currentSearchTime = dayjs().format('YYYY/MM/DD')
		this.defaultDate[0] = this.maxDate
	},
	methods: {
		findMeasureRecord() {
			let params = {
				page: 1,
				size: 100,
				time: this.defaultDate[0],
				userId: this.userId
			}
			findMeasureRecord(params)
				.then((res) => {
					this.daysList = res.data.list
				})
				.catch((err) => {})
		},
		// 查询数据
		async fetchData() {
			console.log('查询')
			uni.showLoading({
				title: '加载中...'
			})
			this.findCh0RateRecord30()
			this.findMeasureRecord()
			uni.hideLoading()
		},
		chartClick(params) {
			if (params.data.rerData.tag == 4 || params.data.rerData.tag == 5) {
				this.chartType = this.getOtherTagLabel(
					params.data.rerData.label
				)
			} else {
				this.chartType = this.getTagLabel(params.data.rerData.tag)
			}
		},
		findCh0RateRecord30() {
			let obj = {
				1: 'D', //日
				2: 'W', //周
				3: 'M' //月
			}
			let params = {
				dateType: obj[this.currentType] || 'D',
				dateTime: this.defaultDate[0],
				userId: this.userId
			}
			findCh0RateRecord30(params).then((res) => {
				let option = {
					grid: {
						left: 0,
						right: 0,
						bottom: 0,
						top: '70',
						containLabel: true
					},
					dataZoom:
						this.currentType == 3
							? {
									id: '',
									type: 'inside',
									filterMode: 'none',
									orient: 'horizontal',
									maxValueSpan: 3600 * 24 * 1000 * 30,
									zoomLock: true
							  }
							: {
									id: '',
									type: 'inside',
									filterMode: 'none',
									orient: 'horizontal',
									maxValueSpan: 3600 * 24 * 1000 * 7,
									zoomLock: true
							  },
					tooltip: {
						trigger: 'axis',
						backgroundColor: '#1F2434',
						showDelay: 0,
						textStyle: {
							color: '#fff',
							fontSize: '14'
						},
						padding: [3, 10],
						formatter: `{b}\n{c}%`,
						position: ['50%', '0%']
					},
					xAxis: {
						type: 'category',
						axisLine: {
							//X轴刻度线样式
							show: true,
							lineStyle: {
								color: '#E6EBF5',
								width: 1
							}
						},

						axisTick: {
							show: false
						},
						axisLabel: {
							//X轴刻度线字体样式
							fontSize: 12,
							color: '#999999'
						},
						data: []
					},
					yAxis: [
						{
							type: 'value',
							splitLine: {
								show: false,
								lineStyle: {
									width: 1,
									color: '#E6EBF5',
									type: 'dashed'
								}
							},
							axisLine: {
								//Y轴刻度线样式
								show: true,
								lineStyle: {
									color: '#E6EBF5',
									width: 1
								}
							},
							min: 0, // Y轴刻度
							max: 100, // Y轴刻度
							interval: 50, // Y轴刻度
							axisLabel: {
								//Y轴刻度线字体样式
								margin: 4,
								formatter: '{value}%',
								fontSize: 12,
								color: '#999999'
							}
						}
					],
					series: []
				}
				let seriesData = [
					{
						// name: '前',
						type: 'line',
						data: [],
						lineStyle: {
							color: '#23C89E',
							width: 2 // 线宽
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: 'rgba(190,239,227,0.8)'
									},
									{
										offset: 0.85,
										color: 'rgba(255,255,255,0)'
									}
								],
								global: false // 缺省为 false
							}
						},

						smooth: true
					}
				]
				let arrData = res.data.map((val, index) => {
					return {
						value: Math.round((val.ch0Rate || 0) * 100),
						rerData: {
							tag: val.tag,
							label: val.label
						},
						itemStyle: {
							color: '#23C89E',
							borderWidth: '0'
						}
					}
				})
				seriesData[0].data = arrData
				option.xAxis.data = res.data.map((val, index) => {
					if (this.currentType == 1) {
						return dayjs(val.measureTime).format('HH:mm')
					} else {
						return dayjs(val.measureTime).format('MM/DD')
					}
				})
				if (!res.data.length) {
					if (this.currentType == 1) {
						option.xAxis.data = ['00:00', '23:59']
					} else {
						let dayArr = []
						for (let index = 0; index < 7; index++) {
							let day = dayjs(this.defaultDate[0])
								.subtract(7 - index, 'day')
								.format('MM/DD')
							dayArr.push(day)
						}
						option.xAxis.data = dayArr
					}
					option['showChart'] = true
				} else {
					option['showChart'] = false
				}
				option.series = seriesData
				this.todayMetabolismOption = option
			})
		},
		// 选择日期
		selectDate(e) {
			console.log(e)
			this.defaultDate[0] = e[0]
			if (this.currentType == 1) {
				// 单个日期
				this.currentSearchTime = e[0].replaceAll('-', '/')
			} else if (this.currentType == 2) {
				this.currentSearchTime = getWeekDate(e[0])
			} else if (this.currentType == 3) {
				this.currentSearchTime = dayjs(e[0]).format('YYYY/MM')
			}
			this.fetchData()
			this.showCalendar = false
		},
		// 上一个选项
		reduceTap() {
			let min = dayjs(this.minDate).format('YYYY/MM/DD')
			if (this.currentType == 1) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(1, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					// 比对前一天是否是最小天数的前一天
					this.currentSearchTime = pre
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 2) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(7, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					this.currentSearchTime = getWeekDate(pre)
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 3) {
				let pre = dayjs(
					dayjs(this.defaultDate[0]).subtract(1, 'month')
				).format('YYYY/MM/DD')
				if (!dayjs(pre).isBefore(min)) {
					this.currentSearchTime = dayjs(pre).format('YYYY/MM')
					this.defaultDate[0] = dayjs(pre).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			}
		},
		// 下一个选项
		plusTap() {
			let max = dayjs(this.maxDate).format('YYYY/MM/DD')
			if (this.currentType == 1) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(1, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(next).isAfter(max)) {
					// 比对后一天是否是最大天数的后一天
					this.currentSearchTime = next
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 2) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(7, 'day')
				).format('YYYY/MM/DD')
				if (!dayjs(next).isAfter(max)) {
					this.currentSearchTime = getWeekDate(next)
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			} else if (this.currentType == 3) {
				let next = dayjs(
					dayjs(this.defaultDate[0]).add(1, 'month')
				).format('YYYY/MM')
				if (!dayjs(next).isAfter(max)) {
					this.currentSearchTime = dayjs(next).format('YYYY/MM')
					this.defaultDate[0] = dayjs(next).format('YYYY-MM-DD')
					this.fetchData()
				} else {
					uni.showToast({
						title: '已经是最后一页',
						icon: 'none'
					})
				}
			}
		},
		// 更改显示状态tabs状态栏
		changeType(type) {
			this.currentType = type
			if (type == '1') {
				this.currentSearchTime = dayjs(this.maxDate).format(
					'YYYY/MM/DD'
				)
			} else if (type == '2') {
				this.currentSearchTime = getWeekDate(this.maxDate)
				this.defaultDate[0] = this.maxDate
			} else if (type == '3') {
				this.currentSearchTime = dayjs().format('YYYY/MM')
				this.defaultDate[0] = this.maxDate
			}
			this.fetchData()
		},

		getTagLabel(type) {
			if (type == 1) {
				return '清晨测量'
			} else if (type == 2) {
				return '运动前'
			} else if (type == 3) {
				return '运动后'
			} else if (type == 6) {
				return '禁食后'
			} else if (type == 7) {
				return '睡前'
			} else if (type == 8) {
				return '自定义测量'
			} else if (type == 9) {
				return '第0天测量'
			} else if (type == 10) {
				return '呼气采集'
			} else if (type == 11) {
				return '吸气采集 '
			}
		},
		getOtherTagLabel(type) {
			if (type == 1) {
				return '早餐前'
			} else if (type == 2) {
				return '午餐前'
			} else if (type == 3) {
				return '晚餐前'
			} else if (type == 4) {
				return '早餐后'
			} else if (type == 5) {
				return '午餐后'
			} else if (type == 6) {
				return '晚餐后'
			} else if (type == 7) {
				return '零食前'
			} else if (type == 8) {
				return '零食后'
			}
		},

		goRemark(info) {
			uni.navigateTo({
				url: `/pagesA/health/analyse/remark/index?id=${
					info.id
				}&rerLevel=${info.rerLevel}&type=${info.type}&measureTime=${
					info.measureTime
				}&content=${info.remark ? info.remark : ''}`
			})
		},
		goRecord() {
			uni.navigateTo({
				url: `/pagesA/health/analyse/record/details?date=${this.defaultDate[0]}`
			})
		},
		getBgColor(data) {
			return getItemColor(data)
		}
	}
}
</script>
<style lang="scss">
page {
	background-color: #f3f4f7;
	min-height: 100%;

	.u-popup__content {
		border-top-left-radius: 128rpx;
	}

	.u-popup__content__close {
		top: 48rpx !important;
		right: 48rpx !important;

		.u-icon__icon {
			font-size: 28rpx !important;
		}
	}
}
</style>
<style lang="scss" scoped>
.analyse {
	background-color: #fff;
	padding: 0 0 48rpx;
	.m-container {
		background-color: #f3f4f7;
	}
	.new-tabs {
		width: 100%;
		height: 66rpx;
		margin-top: 26rpx;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
		background: #f3f4f7;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		.new-tab {
			width: 33.3%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: rgba(31, 36, 52, 0.5);
			line-height: 38rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			border-right: 2rpx solid #d0d0d0;
			&:last-child {
				border-right: 0;
			}
		}
		.current {
			font-weight: 600;
			font-size: 26rpx;
			color: #1f2434;
		}
	}
	.date-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 26rpx 0;
		.date-m {
			min-width: 240rpx;
			padding: 0 28rpx 0 32rpx;
			margin: 0 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 25rpx;
			color: rgba(31, 36, 52, 0.5);
			text-align: center;
		}
	}
	.m-container {
		margin-top: 48rpx;
	}
	.r-card {
		border-radius: 0;
		padding: 0;
		padding-bottom: 20rpx;
		.my-charts {
			height: 460rpx;
			margin: 0 20rpx;
		}
		.current_e_t {
			.level_l {
				background: #fff;
				.level_i {
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #999999;
					.bg-type {
						width: 16rpx;
						height: 16rpx;
						border-radius: 4rpx;
						background: red;
						margin-right: 6rpx;
					}
				}
				.level_n {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}
	.suggestion {
		background: #ffffff;
		margin-top: 20rpx;
		.header {
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #f4f4f4;
			.l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #1f2434;
				line-height: 48rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.r {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(31, 36, 52, 0.5);
				line-height: 48rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.con {
			padding: 30rpx 34rpx;
			position: relative;
			.con-text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #1f2434;
				text-align: left;
				margin-bottom: 26rpx;
				&:last-child {
					margin-bottom: 0;
				}
			}
			.level {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100rpx;
				height: 48rpx;
				background: linear-gradient(225deg, #2ee4b6 2%, #17c196 100%);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				position: absolute;
				right: 34rpx;
				top: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 24rpx;
				color: #ffffff;
				text-align: left;
			}
		}
	}
	.days_l {
		background: #ffffff;
		margin-top: 20rpx;
		.header {
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #f4f4f4;
			.l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #1f2434;
				line-height: 48rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.r {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(31, 36, 52, 0.5);
				line-height: 48rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.con {
			padding: 26rpx 30rpx;
		}
		.items {
			background: #f3f4f7;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			position: relative;
			padding: 24rpx 30rpx 24rpx 60rpx;
			margin-bottom: 20rpx;
			.info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: row;

				.i_t {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					flex-direction: column;

					.type-box {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.tag {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: rgba(31, 36, 52, 0.8);
							line-height: 48rpx;
						}
					}

					.time {
						font-weight: 500;
						font-size: 36rpx;
						color: #1f2434;
						line-height: 48rpx;
						text-align: left;
					}
				}
				.level {
					font-weight: 500;
					font-size: 36rpx;
					color: #1f2434;
					line-height: 48rpx;
					text-align: center;
					.level-text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(31, 36, 52, 0.8);
						line-height: 48rpx;
						text-align: center;
					}
				}
				.details-box {
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
				}
			}
		}
	}
	.a_cell {
		width: 100%;
		height: 88rpx;
		margin-top: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-radius: 32rpx;
		padding: 0 48rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}
}
</style>
